<template>
    <a-modal
            :title="$t('userCenter')"
            :visible="visible"
            :footer="null"
            :confirm-loading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-form @submit="submit" :form="form">
            <a-form-item
                    :label="$t('account')"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input :placeholder="$t('accountInput')"  v-decorator="['account', {rules: [{ required: true, message: $t('accountInput'), whitespace: true}]}]" allow-clear autocomplete='username'/>
            </a-form-item>
            <a-form-item
                    :label="$t('pwd')"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input-password :placeholder="$t('pwdInput')"  v-decorator="['pwd',{rules: [ {validator: validate}]}]" allow-clear autocomplete='password'/>
            </a-form-item>
            <a-form-item
                    :label="$t('email')"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input :placeholder="$t('emailInput')" v-decorator="['email', {}]"  allow-clear/>
            </a-form-item>
            <a-form-item
                    :label="$t('phone')"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input :placeholder="$t('phoneInput')" v-decorator="['phone', {}]"  allow-clear/>
            </a-form-item>
            <a-form-item style="margin-left: 30px;margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
                <a-button type="primary" htmlType="submit">{{$t('submit')}}</a-button>
                <a-button style="margin-left: 8px" @click="handleCancel">{{$t('cancel')}}</a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
    import {getUserInfo, updateUser} from '@/services/user'
    import {roleSelect} from '@/services/role'

    export default {
        name: 'userCenter',
        i18n: require('./i18n'),
        data() {
            return {
                form: this.$form.createForm(this),
                visible: false,
                confirmLoading: false,
            }
        },
        created() {
            //获取用户信息
            //this.getUserInfo();
        },
        methods: {
            init(){
                //打开会话框
                this.visible = true;
                getUserInfo().then(result => {
                    const res = result.data;
                    if (res && res.code === "00000") {
                        let row = res.result;
                        //数据回显
                        this.$nextTick(() => {
                            this.form.setFieldsValue({ // form表单赋值
                                account: row.account,
                                pwd: null,
                                email: row.email,
                                phone: row.phone,
                            });
                        });
                    } else {
                        this.$message.error(res.message, 1)
                    }
                });
            },
            validate(rule, value, f){
                if (value === undefined) {
                    f('密码不能为空！')
                }
                f()
            },
            getUserInfo() {
                getUserInfo().then(result => {
                    const res = result.data;
                    if (res && res.code === "00000") {
                        this.row = res.result.list
                    } else {
                        this.$message.error(res.message, 1)
                    }
                })
            },
            submit(e) {
                e.preventDefault();
                this.form.validateFields((err) => {
                    if (!err) {
                        const id = this.form.getFieldValue('id');
                        const account = this.form.getFieldValue('account');
                        const confirmPwd = this.form.getFieldValue('confirmPwd');
                        const email = this.form.getFieldValue('email');
                        const phone = this.form.getFieldValue('phone');
                        const roleIdList = this.form.getFieldValue('role');
                        const status = this.form.getFieldValue('status');
                        updateUser(id, account, confirmPwd,email,phone,status,roleIdList ).then(result => {
                            const res = result.data;
                            if (res && res.code === "00000") {
                                this.$message.success(res.message, 1)
                            } else {
                                this.$message.error(res.message, 1)
                            }
                        });
                        //刷新列表
                        this.getUserInfo();
                    }
                });
                this.visible = false;
            },
            handleCancel() {
                this.visible = false;
            }
        }
    }
</script>

<style lang="less" scoped>
    .search {
        margin-bottom: 54px;
    }

    .fold {
        width: calc(100% - 216px);
        display: inline-block
    }

    .operator {
        margin-bottom: 18px;
    }

    @media screen and (max-width: 900px) {
        .fold {
            width: 100%;
        }
    }
</style>
